<template>
    <div class="box-border w-full h-[138px]">
        <div class="w-full h-full bg-white rounded-xl pt-6 px-5 pb-8 box-border card"
            :class="collapsed ? '' : 'h-max'"
            @mouseout="handleMouseOut()"
        >
            <a-flex :gap="10">
                <label class="text-theme card-symbol">Q:</label>
                <p class="text-primary text-base font-bold">
                    {{ item.question }}
                </p>
                <a-dropdown placement="bottomRight">
                    <GpFontIcon name="icon-gengduo" class="!text-xl !leading-5 text-[#ACAEB2] cursor-pointer ml-auto" /> 
                    <template #overlay>
                        <a-menu @click="handleMenuClick">
                            <a-menu-item key="update">编辑</a-menu-item>
                            <a-menu-item key="remove">删除</a-menu-item>
                        </a-menu>
                    </template>
                </a-dropdown>
            </a-flex>
            <a-flex :gap="10" class="mt-[9px]">
                <label class="text-[#0DAF7B] card-symbol">A:</label>
                <TypographyParagraph v-if="collapsed" class="text-third text-sm font-normal"
                    :ellipsis="{ rows: 2, expandable: true, symbol: '展开', onExpand }"
                    :content="item.answer || '-'"
                >
                </TypographyParagraph>
                <p v-else class="text-third text-sm font-normal">
                    {{ item.answer || '-' }}
                </p>
            </a-flex>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { TypographyParagraph} from 'ant-design-vue';
import type { KnowledgeDetailResult } from '@/api/siderBar/model';

defineOptions({
    name: 'KnowCard',
    inheritAttrs: false
})
const { item } = defineProps<{
    item: KnowledgeDetailResult
}>()
const emit = defineEmits<{
    action: [type: 'remove' | 'update', item: KnowledgeDetailResult]
}>()
const collapsed = ref(true)
function handleMenuClick({key}: {key: unknown}) {
    // @ts-ignore
    emit('action', key, item)
}
function onExpand() {
    collapsed.value = false
}
function handleMouseOut() {
    collapsed.value = true
}
</script>
<style lang="less" scoped>
.card {
    box-shadow: 0 4px 20px 0 #2e294d0f;
    cursor: pointer;
    transition: .15s;
    &:hover {
        transform: translateY(-10px);
    }
    .card-symbol {
        font-family: "Alimama FangYuanTi VF";
        font-weight: Bold-Square;
        font-size: 16px;
    }
}
</style>